<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收费站</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!-- 查询条件 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item >
                <div class="block">
                    <el-input  v-model="patientIdCard" placeholder="请输入身份证号码"></el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doSearch1">查询未支付</el-button>
                <el-button type="primary" @click="doSearch2">查询所有支付清单</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据 -->
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="patientId" label="病人ID" width="180">
            </el-table-column>
            <el-table-column prop="patientName" label="病人姓名" >
            </el-table-column>
            <el-table-column prop="caseId" label="病例ID" >
            </el-table-column>
            <el-table-column prop="prescriptionId" label="处方编号" >
            </el-table-column>
            <el-table-column prop="productName" label="药品名称" width="180">
            </el-table-column>
            <el-table-column prop="medicineNumber" label="药品数量" width="180">
            </el-table-column>
            <el-table-column prop="medicinePrice" label="药品单价" width="180">
            </el-table-column>
            <el-table-column prop="medicineTotal" label="药品总价" width="180">
            </el-table-column>
            <el-table-column prop="status" label="支付状态" width="180">
            </el-table-column>
        </el-table>
        <form role="form" action="medical/check-apply/productPay" id="update-form">
            <input type="hidden" name="patientIdCard" :value="patientIdCard">
            <input type="hidden" name="prescriptionId" :value="prescriptionId">
            <input type="text" name="productTotal" readonly :value="productTotal">
            <input type="submit" value="付款" style="background-color: #3a8ee6">
        </form>
        <!--<el-form label-width="100px" action="medical/check-apply/productPay" id="update-form" class="demo-ruleForm">
        <el-form-item label="需支付价格">
            <el-input type="submit" name="productTotal" :readonly style="width: 100px">{{productTotal}}}</el-input>
            <el-input type="submit" style="width: 100px">全部付款</el-input>
        </el-form-item>
        </el-form>-->
       <!-- 检查项目计费-->
        <el-table :data="projectData" stripe border style="width: 100%">
            <el-table-column prop="patientId" label="病人ID" width="180">
            </el-table-column>
            <el-table-column prop="patientName" label="病人姓名" >
            </el-table-column>
            <el-table-column prop="caseId" label="病例ID" >
            </el-table-column>
            <el-table-column prop="projectTypeName" label="项目类型" >
            </el-table-column>
            <el-table-column prop="projectName" label="项目名称" width="180">
            </el-table-column>
            <el-table-column prop="projectPrice" label="项目价格" width="180">
            </el-table-column>
            <el-table-column prop="checkChargePayStatus" label="支付状态" width="180">
            </el-table-column>
        </el-table>
        <form role="form" action="medical/check-apply/projectPay" id="projectPay-form">

            <input type="hidden" name="checkApplyId" :value="checkApplyId">
            <input type="hidden" name="patientIdCard" :value="patientIdCard">
            <input type="text" name="projectTotal" readonly :value="projectTotal">
            <input type="submit" value="付款" style="background-color: #3a8ee6">
        </form>

        <el-table :data="registerData" stripe border style="width: 100%">
            <el-table-column prop="patientId" label="病人ID" width="180">
            </el-table-column>
            <el-table-column prop="patientName" label="病人姓名" >
            </el-table-column>
            <el-table-column prop="chargeRecordCause" label="缴费项目" >
            </el-table-column>
            <el-table-column prop="chargeRecordDate" label="缴费时间" >
            </el-table-column>
        </el-table>
        <!--<el-form label-width="150px"  class="demo-ruleForm">
            <el-form-item label="需支付价格">
                <span>{{projectTotal}}</span>
                &lt;!&ndash;<el-input :disabled="true" style="width: 100px" v-model="projectTotal"></el-input>&ndash;&gt;
                <el-button type="primary" @click="payProject" >全部付款</el-button>
            </el-form-item>
        </el-form>-->
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                productTotal:0,
                projectTotal:0,
                patientIdCard:'',
                tableData: [],
                projectData:[],
                checkApplyId:[],
                prescriptionId:[],
                registerData:[],
            },
            methods:{
                doSearch1:function () {
                    var vm=this;
                    this.productTotal=0;
                    this.projectTotal=0;
                    this.registerData=[];
                    const formData=new FormData();
                    formData.append("patientIdCard",vm.patientIdCard);
                    axios.post('/medical/prescription/selectProduct',formData).then(
                        function(resp){
                            console.log(resp.data);
                            vm.tableData=resp.data.data;
                            for(let i=0;i<vm.tableData.length;i++){
                                vm.productTotal+=vm.tableData[i].medicineTotal;
                            };
                            for(let i=0;i<vm.tableData.length;i++){
                                if(vm.prescriptionId.indexOf(vm.tableData[i].prescriptionId)==-1){
                                    vm.prescriptionId.push(vm.tableData[i].prescriptionId);
                                }
                            };
                            console.log(vm.prescriptionId);
                        }
                    );
                    axios.post('/medical/prescription/selectProject',formData).then(
                        function(resp){
                            console.log(resp.data);
                            vm.projectData=resp.data.data;
                            for(let i=0;i<vm.projectData.length;i++){
                                vm.projectTotal+=vm.projectData[i].projectPrice;

                            };
                            for(let i=0;i<vm.projectData.length;i++){
                                if(vm.checkApplyId.indexOf(vm.projectData[i].checkApplyId)==-1){
                                    vm.checkApplyId.push(vm.projectData[i].checkApplyId);
                                }
                            };
                            console.log(vm.checkApplyId);
                        }
                    );
                },
                doSearch2:function(){
                    var vm=this;
                    this.productTotal=0;
                    this.projectTotal=0;
                    const formData=new FormData();
                    formData.append("patientIdCard",vm.patientIdCard);
                    axios.post('/medical/prescription/selectProductAll',formData).then(
                        function(resp){
                            console.log(resp.data);
                            vm.tableData=resp.data.data;
                        }
                    );
                    axios.post('/medical/prescription/selectProjectAll',formData).then(
                        function(resp){
                            console.log(resp.data);
                            vm.projectData=resp.data.data;
                        }
                    );
                    axios.post('/medical/prescription/selectRegister',formData).then(
                        function (resp) {
                            console.log(resp.data);
                            vm.registerData=resp.data.data;
                        }
                    )
                },
                payProject:function () {
                    var vm=this;
                    const formData=new FormData();
                    formData.append("projectTotal",vm.projectTotal);
                }
            },


        });
    </script>
</body>
</html>